<template>
    <div class="employee">
        <!-- 按钮开始 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <span style="margin:0 10px">
        <el-button @click='showHandler' type="primary"  plain>添加</el-button>
      </span>
      
      <el-form-item >
        <el-input v-model="formInline.user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.region" placeholder="请选择栏目">
          <el-option label="禁用" value="shanghai"></el-option>
          <el-option label="正常" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮结束 -->

    <!-- 表格开始 -->
    <el-table
        :data="employees"
        stripe
        style="width: 100%">
        <el-table-column
        prop="id"
        label="编号"
        width="180">
        </el-table-column>
        <el-table-column
        prop='username'
        label="用户名"
        width="180">
        </el-table-column>
        <el-table-column
        prop="realname"
        label="姓名"
        width="180">
        </el-table-column>
        <el-table-column
        prop="telephone"
        label="手机号"
        width="180">
        </el-table-column>
        <el-table-column
        prop="gender"
        label="性别"
        width="180">
        </el-table-column>
        <el-table-column
        prop="status"
        label="状态"
        width="180">
        </el-table-column>
        
        <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="180">
        <template slot-scope="scope">
           <el-link @click="editHandler(scope.row)" type="success">编辑</el-link>&nbsp;&nbsp;
          <el-popconfirm title="确定删除这条信息吗？" @onConfirm="deleteHandler(scope.row.id)">
            <el-link slot="reference" type="danger">删除</el-link>
          </el-popconfirm>&nbsp;&nbsp;
          <el-link @click="editHandler(scope.row)" type="primary">详情</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <div style="float:right;">
    <el-pagination
      layout="prev, pager, next"
      :page-size="list.pageSize"
      :total="total"
      :roleId='roleId'
      @current-change="changeHandler">
    </el-pagination>
    </div>
    <!-- 分页结束 -->

    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">

      <!-- 表单开始 -->
      <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm" >
        <el-form-item label="用户名" prop="age">
          <el-input v-model.number="ruleForm.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="age">
          <el-input v-model.number="ruleForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="age">
          <el-input v-model.number="ruleForm.name" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->

      <div slot="footer" class="dialog-footer">
        <el-button size='mini' @click="dialogFormVisible = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="submitHandler">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
    </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
    data(){
        return{
            list:{
                page:1,
                pageSize:10,
            },
            dialogFormVisible:false,
            ruleForm:{},
            title:'添加员工信息',
            input: '',
            formInline: {
            user: '',
            region: '',
        }
        }
    },
    computed:{
        ...mapState('employee',['employees']),
        ...mapState('employee',['total']),
        ...mapState('employee',['roleId']),
    },

    methods:{
    ...mapActions('employee',['findAllEmployee','saveEmployee','deleteEmployee']),
    //分页
    changeHandler(page){
      this.list.page=page;
      this.findAllEmployee(this.list)
    },

    //去添加产品信息
    showHandler(){
      this.dialogFormVisible=true
    },

    //提交保存产品信息
    submitHandler(){
      this.saveEmployee(this.ruleForm).then(res=>{
        console.log(res,'/////////////////////////');
        if(res.status==200){
          this.dialogFormVisible=false
          this.findAllEmployee(this.list)
          this.$message({
            type:'success',
            message:res.message
          })
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },

    //编辑修改产品信息
    editHandler(data){
      // console.log(data);
      
      //将当前行的内容，复制给ruleFrom
      this.ruleForm=data
      this.title='编辑栏目信息'
      //打开模态框
      this.dialogFormVisible=true
    },

    //删除产品信息
    deleteHandler(id){
      let params={
        id
      }
      
      this.deleteEmployee(params).then(res=>{
        if (res.status==200){
          this.findAllEmployee(this.list)
          this.$message({
            type:'success',
            message:res.message
          })
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },

  //文件上传成功时
    successHandler(file){
      // console.log(file);
      //文件上传成功，将拿到的图片地址，保存到我们栏目信息的对象中（ruleFrom）
      this.ruleForm.icon=file 
    },
    onSubmit() {
        console.log('submit!');
    }
  },

    created(){
    this.findAllEmployee(this.list)
  }
}

</script>